<template>
  <div>
    <el-button @click="showHandler()" size='small' type="primary">新增</el-button>
    <!-- 表格开始 -->
    <template>
      <el-table
        :data="systemData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          align="center"
          label="序号"  
         width='100'>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="val"
          align="center"
          label="值">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <p>{{scope.row.val}}</p>
              <!-- <img width="30px" :src="scope.row.val" alt=""> -->
            </div>
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="introduce"
          label="介绍">
        </el-table-column>
        <el-table-column
          align="center"
          prop="caozuo"
          label="操作">
          <template slot-scope="scope">
                <el-button @click="editHandler(scope.row)" size="mini" type="primary" plain>编辑</el-button>
                <el-button  size="mini" type="danger" plain>删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 表格结束 -->
    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
       <!-- Form开始-->
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduce">
          <el-input v-model="ruleForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="val">
          <el-input v-model="ruleForm.val"></el-input>
          <!-- <el-upload
            class="upload-demo"
            drag
            action="http://81.69.24.232/pet/jz_upload.php"
            :on-success="successHandler">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload> -->
        </el-form-item>
      </el-form>
      <!-- Form结束-->
      <div slot="footer" size="small" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import {get,post} from '../../utils/request'
export default {
  data(){
    return {
      systemData:[],
      dialogFormVisible:false,
      title:'添加基础配置',
      ruleForm:{}
    }
  },
  methods:{
    findAllConfig(){
      get('/baseConfig/findAll').then(res=>{
        // console.log(res.data);
        this.systemData=res.data
      })
    },
    showHandler(){
      this.title='添加基础配置';
      this.dialogFormVisible=true;
    },
    editHandler(data){
      // console.log(data);
      this.title='编辑配置信息';
      this.dialogFormVisible=true;
      this.ruleForm=data;
    }
  },
  created(){
    this.findAllConfig()
    // this.showHandler()
  }
}
</script>

<style>

</style>